<template>
	<view>
		<view class="">
			<view
				style="width: 750rpx; background: linear-gradient(180deg,#5A53CE, #5A53CE);min-height: 100vh;display: inline-block;">



				<view class="block" v-for="(item,index) in list" :key="index">

					<view style="height:120rpx;">
						<view class="u-font-weight u-font-34">{{item.cardName}}</view>
						<view class="u-flex u-row-between u-font-24 u-margin-top-10">
							<view>￥{{item.price}}</view>
							<view>购买后限时{{item.freeTime}}分钟</view>
						</view>
					</view>
					
					
					<view @click="buy(item)" class="u-text-center  u-padding-10" style="border-top: 1rpx dashed #ffff;">立即购买</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wxpay from '@/common/wxpay.js';

	export default {
		data() {
			return {
				id:"",
				list: [{

				}]
			}
		},
		methods:{
			buy(item){
				this.$u.post('/indent/buyCard',{
					card_id:item.id
				}).then(res=>{
					const wx = new wxpay(res);
					wx.pay().then(res => {
						this.$refs.uToast.show({
							title: '开台成功',
							type: 'success',
							callback: () => {
								this.show = false;
								this.getCarport()
							}
						})
					}).catch(err => {})
				})

			},
			get(){
				this.$u.post('/index/card',{
					store_id:this.id
				}).then(res=>{
					this.list=res
				})
				
			},
			getDetail(){
				this.$u.post('/index/cardDetail',{
					id:this.id
				}).then(res=>{
					this.list=[res]
				})
			}
		},
		onLoad(options) {
			if(options.q){
				let params=	this.$getParams(decodeURIComponent(options.q));
				
				console.log(params)
				this.id=params.id;
			     this.getDetail()
				console.log(params)
			}
			if(options.id){
				this.id=options.id;
				this.get()
			}
		}

	}
</script>
<style scoped>
	.block {
		background: linear-gradient(to left, #658EF9, #918DFF);
		width: 700rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		position: relative;
		padding: 30rpx;
		height: 220rpx;
		color: #ffff;
	}

	.block::after {
		content: '';
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: -25rpx;
		overflow: hidden;
		bottom: 40rpx;
		background: #5A53CE;
		border-radius: 100%;
		z-index: 99;
	}

	.block::before {
		content: '';
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: -25rpx;
		overflow: hidden;
		bottom: 40rpx;
		background: #5A53CE;
		border-radius: 100%;
		z-index: 99;
	}
</style>